<template>
  <div class="gjcawb">
    <div class="header">
      <h1 class="title">
        功能区
      </h1>
      <div class="form-wrapper cargo-form no-valid single">
        <el-form>
          <el-row type="flex" align="middle">
            <el-col :span="12">
              <el-form-item>
                <div slot="label">运单号</div>
                <el-input size="mini"></el-input>
                <el-button size="mini" type="primary"> 查询</el-button>
                <el-button size="mini" type="primary"> 取消</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <div slot="label">交单时间</div>
                <el-date-picker
                  size="mini"
                  type="date"
                  placeholder="请选择日期"
                  format="yyyy年MM月dd日"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
                <el-button size="mini" type="primary"> 单证交接</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="detail-wrapper">
      <h1 class="title">
        运单信息
      </h1>
      <div class="form-wrapper cargo-form no-valid">
        <el-form :inline="true">
          <el-row>
            <el-col :span="12">
              <el-form-item label="运单号">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业务类型">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="承运人">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="航程">
                <el-input size="mini"></el-input>
                <div class="split"></div>
                <el-input size="mini"></el-input>
                <div class="split"></div>
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="代理人">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="入库时间">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item label="运单件数">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="运单重量">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="入库件数">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="入库重量">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="入库体积">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="运单类型">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="品名">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="特码">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="子码">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="包装类型">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="货物类型">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="运输证">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="准运证">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商检证">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item label="商检指令">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="海关指令">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="预配">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="装载">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="运抵">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="理货">
                <el-input size="mini"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="btn-wrapper">
        <el-button size="mini">取消</el-button>
      </div>
    </div>
    <div class="tab-wrppaer">
      <el-tabs v-model="activeName">
        <el-tab-pane label="仓库货物" name="ckhw">
          <div class="ckhw">
            <div class="btn-wrapper">
              <el-button size="mini">修改</el-button>
              <el-button size="mini">分批</el-button>
              <el-button size="mini">合并</el-button>
              <el-button size="mini">换单号</el-button>
              <el-button size="mini">退回</el-button>
            </div>
            <div class="table-wrapper">
              <el-table>
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  prop="date"
                  label="代理人代码">
                </el-table-column>
                <el-table-column
                  prop="dep"
                  label="始发站">
                </el-table-column>
                <el-table-column
                  prop="tostation"
                  label="目的站">
                </el-table-column>
                <el-table-column
                  prop="carrier"
                  label="承运人">
                </el-table-column>
                <el-table-column
                  prop="shedfno"
                  label="航班号">
                </el-table-column>
                <el-table-column
                  prop="spcode"
                  label="特码">
                </el-table-column>
                <el-table-column
                  prop="weightm"
                  label="M">
                </el-table-column>
                <el-table-column
                  prop="weightn"
                  label="N">
                </el-table-column>
                <el-table-column
                  prop="weight45"
                  label="45">
                </el-table-column>
                <el-table-column
                  prop="weight100"
                  label="100">
                </el-table-column>
                <el-table-column
                  prop="weight300"
                  label="300">
                </el-table-column>
                <el-table-column
                  prop="weight500"
                  label="500">
                </el-table-column>
                <el-table-column
                  prop="weight1000"
                  label="1000">
                </el-table-column>
                <el-table-column
                  prop="remarks"
                  label="备注">
                </el-table-column>
                <div slot="empty">
                  <i class="iconfont icon-bukaixin"></i> 暂无数据
                </div>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="附加信息" name="markRate">附加信息</el-tab-pane>
        <el-tab-pane label="操作日志" name="agentRate">操作日志</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeName: 'ckhw'
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/variable.styl"

  .gjcawb
    .header
      padding 20px
      background $color-panel
      margin-bottom 20px
      .title
        padding-bottom 10px
        font-weight 700
      .form-wrapper
        background $color-panel-grey
        overflow-x auto
        padding 10px
        margin 0 10px
  .detail-wrapper
      padding 20px
      background $color-panel
      margin-bottom 20px
      .title
        font-weight 700
      .btn-wrapper
        padding 10px
    .tab-wrppaer
      padding 20px
      background $color-panel
      .ckhw
        padding 0 10px
        .table-wrapper
          padding 10px 0
</style>
